<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件之通过插槽(slot)分发内容</title>
  <!--<script src="你的vue地址，请下载最新版的"></script>-->
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.2.2/index.js"></script>
  <script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
  <script src="//unpkg.com/v-charts/lib/line.min.js"></script>-->

  <script>
    Vue.component("test-slot",{
      // 插槽允许有默认内容
      template:
        `<div>
                    <strong>Error!</strong>
                    <slot></slot>
                </div>
               `,
      data:function () {
        return {
          name:"perry"
        }
      }
    });
    //    具名插槽
    Vue.component("slot-name",{
      template:
        `<div>
                      <header>
                            <slot name="header"></slot>
                      </header>
                     <main>
                        <slot ></slot>
                     </main>
                     <footer>
                        <slot name="footer"></slot>
                     </footer>

                </div>
               `
    });

    //    作用域插槽
    Vue.component("todo-list",{
      inheritAttrs:false,
      props:{
        todos:[Array,Object]
      },
      template:
        `<ul>
                <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                    <slot :data="todo">{{todo.text}}</slot>
                </li>
             </ul>
            `
    });

  </script>

  <style>
    li{
      list-style: none;
      display: inline-block;
      font-size: 25px;
    }
  </style>
</head>
<body>
<div id="app">
  <!--1、插槽内容  slot可以接收任何内容、代码，包括组件-->
  <test-slot>Something bad happened.你是谁啊，我认识你吗</test-slot>
  <test-slot>
    Something bad happened.
    <!--允许使用变量，但该变量必须是本作用域的才会生效，这里name的值将会是"岔道口"-->
    <h3>标题{{name}}</h3>
    <img src="img/flower.jfif" alt="图片无法显示">

  </test-slot>
  <!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名-->
  <slot-name>
    <h3>劝学</h3>
    <p>少壮不努力，老大徒伤悲</p>
    <p>光阴似箭，日月如梭</p>
    <template slot="header">
      <ul >
        <li>主页</li>
        <li>关于时间</li>
        <li>关于人生</li>
        <li>关于未来</li>
      </ul>
    </template>
    <p>你好啊</p>
    <p slot="footer">1212</p>
    <p>结尾</p>
    <p>粤ICP备6545646456415</p>
    </p>
  </slot-name>

  <!--使用作用域插槽，通过slot-scope实现-->
  <todo-list :todos="todos">
    <template slot-scope="slotProps">
      <span v-if="slotProps.data.isTrue">√</span>
      {{slotProps.data.text}}
    </template>
  </todo-list>

  <!--使用ES2015结构语法-->
  <todo-list :todos="todos">
    <template slot-scope="{data}">
      <span v-if="data.isTrue">√</span>
      {{data.text}}
    </template>
  </todo-list>
</div>

<script>
  new Vue({
    el:"#app",
    data:{
      name:"岔道口",
      todos:[
        {text:"A",id:1,isTrue:true},
        {text:"B",id:2,isTrue:true},
        {text:"C",id:3,isTrue:false},
        {text:"D",id:4,isTrue:true},
      ],
      // slotProps:""
    }
  })

</script>
</body>
</html>
